<template>
    <el-row>
        <el-col :span="8" id="one" style="width:100%;height:100%"></el-col>
        <el-col :span="8" id="two" style="width:100%;height:100%"></el-col>
        <el-col :span="8" id="three" style="width:100%;height:100%"></el-col>
    </el-row>
</template>

<script setup lang="ts">
import { echat } from '@/service/welcome';
import * as echarts from 'echarts';
import { onMounted,ref } from 'vue';
const ChartList = ref({} as any)

// 需要在DOM加载完毕之后才可获取到
onMounted( async () => {
    // 获取用户数据统计
    const res:any = await echat()
    if(res.errNo===0){
        ChartList.value = res.data
    }
    console.log(ChartList.value)

    // 基于准备好的dom，初始化echarts实例
    let myChartOne = echarts.init(document.getElementById('one') as any);
    let myChartTwo = echarts.init(document.getElementById('two') as any);
    let myChartThree = echarts.init(document.getElementById('three') as any);
    // 绘制图表
    myChartOne.setOption({
        title: {
            text: '千峰男女比例',
            // subtext: '时间',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: ChartList.value.gender,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
    myChartTwo.setOption({
        title: {
            text: '千峰学员分布',
            // subtext: '时间',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: ChartList.value.area,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
    myChartThree.setOption({
        title: {
            text: '千峰学员来源',
            // subtext: '时间',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left'
        // },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: ChartList.value.accessFrom,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
})

</script>

<style scoped>
.el-row {
    height: 100%;
    margin-top: 30px;
}
</style>